<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    /* 
    1. init
      ● 做了一些关于事件和生命周期的初始化准备工作 (不重要)
      ● 执行 beforeCreate()
        ○ 不能访问data中的属性
        ○ 不能调用methods中的方法
      ● 初始化 data/methods/computed/watch /props
        ○ 实现data的数据代理
        ○ 实现data的数据劫持
        ○ 将methods的方法挂载到vm上, 并指定this为vm
      ● 执行 created()
        ○ 能访问data中的属性
        ○ 能调用methods中的方法
    2. mount
      ● 编译模板:  如果有render函数, 不需要此过程
        ○ 将template字符串编译生成render函数   此时还不执行
      ● 执行 beforeMount()
      ● 调用render函数生成虚拟DOM => 生成真实DOM, 并替换页面中的el元素显示 (使用patch函数)
      ● 执行 mounted()
    3. update
      ● 执行 beforeUpdate() ==> 如果读取界面, 读取到的旧的
      ● 调用 render函数产生新虚拟DOM => 执行patch函数(进行新旧虚拟DOM Diff, 进行最小化DOM更新)
      ● 执行 updated() ==> 如果读取界面, 读取到的新的
    */
    new Vue({
      el: '#root',
      data: {
        msg: 'abc'
      },
      // template: '<p title="aaa">{{msg}}</p>',
      beforeCreate() {
        console.log('beforeCreate', this.msg)
        // this.fn() // error
      },
      // 初始化data/methods/computed/watch
      created () {
        console.log('created', this.msg)
        this.fn()
      },

      beforeMount() {
        console.log('beforeMount()')
      },

      render (createElement) {
        console.log('render()')
        const vnode = createElement('p', {attrs: {title: 'bbb'}}, this.msg)
        return vnode
      },

      mounted () {
        console.log('mounted()')
        setTimeout(() => {
          this.msg = 'cba'
        }, 2000);
      },

      beforeUpdate () {
        console.log('beforeUpdate()', this.msg)
      },
      // render() => 生成虚拟DOM => 进行diff => dom更新
      updated () {
        console.log('updated()', this.msg)
      },

      methods: {
        fn() {
          console.log('fn()')
        }
      }
    })
  </script>
</body>
</html>